<template>
    <div id="map"></div>
</template>

<script>
import * as maptalks from "maptalks";
export default {
    name: 'MTdemo1',
    data() {
        return {

        }
    },
    methods: {
        init() {
            // new maptalks.Map("map", {
            //     center: [19.06325670775459, 42.16842479475318],
            //     zoom: 3,
            //     pitch: 60,
            //     // bearing: 180,

            //     centerCross: true,
            //     doubleClickZoom: false,
            //     baseLayer: new maptalks.TileLayer('tile', {
            //         urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
            //         subdomains: ['a', 'b', 'c', 'd'],
            //         attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            //     })
            // })
            // new maptalks.Map('map', {
            //     center: [-0.113049,51.498568],
            //     zoom: 14,
            //     baseLayer: new maptalks.TileLayer('base', {
            //     urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
            //     subdomains: ['a','b','c','d'],
            //     attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            //     })
            // });

            new maptalks.Map('map', {
                center: [105.08052356963802, 36.04231948670001],
                // center: [19.06325670775459, 42.16842479475318],
                zoom: 8,
                pitch: 60,
                minZoom:1,
                maxZoom:19,
                spatialReference:{
                projection : 'baidu'
                },
                baseLayer: new maptalks.TileLayer('base', {
                'urlTemplate' : 'https://gss{s}.bdstatic.com/8bo_dTSlRsgBo1vgoIiO_jowehsv/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&udt=20170927',
                'subdomains':[0, 1, 2, 3],
                'attribution' :  '&copy; <a target="_blank" href="http://map.baidu.com">Baidu</a>'
                })
            });
        }
    },
    mounted() {
        this.init()
    }
}
</script>

<style>
#map {
    width: 100%; 
    height: 100vh; 
    position: relative; 
    overflow: hidden;
}
</style>